<template> 
   <div class="Back blogFont" >
       <div  class="Search">
            <SearchTitle  id="SearchTitle"  class="flex"/>
             <div class="SearchInputBox">
               <SearchInput   id="SearchInput" class="flex"/>
             </div>
            <div class="Content">
                <!-- 搜索的状态 -1:表示未搜索 0:输入了值但是删除到了空白 1:加载中 2:正常的搜索结果  3:空数据  4:网络问题或者非法输入等问题 -->
                <SearchHistory id="SearchHistory" v-if="SearchProcess<=0"/>
                <SearchHot  id="SearchHot" v-if="SearchProcess<=0"/>
                <SearchResult  id="SearchResult"  class="flex" v-if="SearchProcess==2"/>
                <SearchState   id="SearchState" class="flex" v-else/>
            </div>

       </div>
   </div>
</template>
<script>
import SearchHistory from './SearchHistory/SearchHistory.vue'
import SearchState from './SearchState/SearchState.vue'
import SearchTitle from './SearchTitle/SearchTitle.vue'
import SearchInput from './SerachInput/SearchInput.vue'
import {mapState,mapMutations,mapActions} from 'vuex'
import SearchResult from './SearchResult/SearchResult.vue'
import SearchHot from './SearchHot/SearchHot.vue'
  export default 
  {
     components: { SearchTitle, SearchInput, SearchHistory, SearchState, SearchResult, SearchHot },
     name :'', 
     computed:{
        // 搜索的状态 -1:表示未搜索 0:输入了值但是删除到了空白 1:加载中 2:正常的搜索结果  3:空数据  4:网络问题或者非法输入等问题 
       ...mapState('Search',['SearchProcess']),
       //文章热度榜单
       ...mapState('Init',['ArticleHotData'])
     },
     methods:{
        ...mapMutations('Search',['REFRESH']), //重新刷新
        ...mapActions('Init',['getArticleHotData']) //获取热搜数据
        
     },
     mounted(){
        this.REFRESH() //刷新
        if(this.ArticleHotData == null)
        this.getArticleHotData() //获取文章热度榜单

        document.body.style.overflow = 'hidden'
     },
     beforeDestroy(){
         document.body.style.overflow = 'auto'
     }
  }
</script>
<style scoped lang='less'>
.Back{
    background: rgba(0, 0, 0, 0.7);
}
.Search{
    min-width: 350px;
    width: 80%;
    max-width: 800px;
    border-radius: 15px;
    background: var(--GeneralBackColor-half);
    overflow: hidden;
    max-height: 90vh;
}
// 标题
#SearchTitle{
  width: 100%;
  height: 50px;
  position: sticky;
  top: 0;
  background: var(--GeneralBackColor);
}
.Content,.SearchInputBox{
    width: 100%;
    padding: 0px 10px;
    padding-top: 10px;
    box-sizing: border-box;
    
    color: white;
    font-size: 20px;

}
.Content{
   height: 50vh;
   overflow: auto;
   border-bottom: 10px solid var(--GeneralBackColor-half);
}


//搜索输入框
#SearchInput{
  width:100%;
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--GeneralBackColor);
  justify-content: flex-start;
  flex-wrap: nowrap;

  padding: 10px; 
  box-sizing: border-box;

} 
//搜索历史 热度榜
#SearchHistory,#SearchHot{
  margin: 10px 0;
  color: var(--fontColor);
}
//搜索的状态
#SearchState{
  width: 100%;
  position:absolute;
  top: 50%;left: 50%;
  transform: translate(-50%,-50%);
}
#SearchResult{
  width: 100%;
  
}
</style>